<template>
  <q-dialog class="my-dialog-form" v-model="isFlagShow" style="margin-left:20px">
    <q-card class="my-card q-mx-lg" >
      <q-toolbar class="row items-center my-form-header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <div class="col q-gutter-xs">
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>控制参数a：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.contrllerA"
                  error-message="请输入不少于2个字符！"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>控制参数b：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.contrllerB"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>控制参数c：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.contrllerC"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>控制参数d：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  v-model="param.contrllerD"
                />
              </q-item-section>
            </q-item>
          </div>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my-form-footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>
  
<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, ref, toRefs, PropType, watch, toRef } from 'vue';
import { scaBaseUrlAPI } from 'src/util/ScaBaseConst';
import { useCommonStore } from 'src/stores/commonStore';
import { storeToRefs } from 'pinia';
import { RecyclingWaterTank } from './RecyclingWaterTankModel'

export default defineComponent({
  cname: 'RecyclingWaterTankParamsDlg',
  components: {
      
  },
  setup (props, context) {
  
    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);
    
    //窗口标题
    let dlgTitle = ref('回收水罐参数设置');

    let param = ref<RecyclingWaterTank>({
      id: 0,
      name: '',
      contrllerA: 0,
      contrllerB: 0,
      contrllerC: 0,
      contrllerD: 0
    });

    const onSubmit = () => {

    };

    const onReset = () => {

    };

    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
    }
        
    return {
      isFlagShow,
      dlgTitle,
      param,
      onSubmit,
      onReset,
      show,
      close
    }
  }
})
</script>
  
  <style lang="scss" scoped>
  .my-card {
    alignment: center;
    width: 600px;
    max-width: 800px;
  
    .my-form-container {
      text-align: center;
      padding: 5px 50px 5px 50px;
      height: 430px;
    }
  }
  </style>  
